<template>
	<div class="curriculum-assistance">
		<img src="./assets/bg-top.jpg" class="bg-top" :class="{iphoneX: $utils.isIphoneX()}">
		<div class="header" :class="{iphoneX: $utils.isIphoneX()}">
			<span @click="handleBack" class="iconfont icon-back-new"></span>
			<span class="header-title" v-if="assistancesData.assistanceFlag === 0 || assistancesData.assistanceFlag === 1">我的助力</span>
			<span class="iconfont icon-share-new" @click="handleJoinActivites" v-if="assistancesData.assistanceFlag !== 1 &&　!assistancesData.invalidFlag"></span>
			<div v-if="assistancesData.assistanceFlag === 1 || assistancesData.invalidFlag"></div>
		</div>

		<!-- 活动状态 未完成助力 -->
		<div class="status-wrap" v-if="assistancesData.assistanceFlag !== 1">
			<div v-if="!assistancesData.invalidFlag">
				<p class="text">活动剩余时间</p>
				<p class="text"><em class="tiem-text">{{remainingTime[0]}}</em>天<em>{{remainingTime[1]}}</em>小时</p>
			</div>
			<p v-else class="text">活动已结束</p>
			<div class="btn-wrap">
					<div class="btn" :class="{'complete': assistancesData.invalidFlag}" @click="handleJoinActivites">{{activitesStatusText}}</div>
					<img src="./assets/leaf-s.png" class="leafImg">
			</div>
		</div>

		<!-- 活动状态 已完成助力 -->
		<div class="status-wrap" v-if="assistancesData.assistanceFlag === 1">
			<div class="btn-wrap complete">
					<div class="btn complete">已完成助力</div>
					<img src="./assets/leaf-l.png" class="leafImg large">
			</div>
		</div>

		<!-- 课程 音频 -->
		<div class="section  paddingBottm">
			<div class="triangle"></div>
			<div class="title-assist">防套路指南免费送<div class="tail"></div></div>
			<div class="section-title">
				<div class="title-wrap"><img src="./assets/title1.png" class="titleImgOne"></div>
			</div>

			<!-- 音频 s -->
			<div class="audio-wrap">
				<div class="audio-btn" :class="isPlay ? 'pause' : 'play'" @click="togglePlay"></div>
				<y-progress-bar :currentTime="currentTime" :endTime="endTime" :currentTimeChange="changeCurrentTime"
				:hiddenTime="true"  class="progress-bar"/>
				<div class="time">{{assistancesData.duration  | filterSeconds}}</div>
				<p class="assist-text-complete" v-if="assistancesData.assistanceFlag !== 1">试听</p>
				<p class="assist-text-complete" v-if="assistancesData.assistanceFlag === 1">完整课程</p>
				<audio
					:src="assistancesData.audioUrl"
					ref="audioRef" 
					preload="auto" 
					@timeupdate="updateTime"
					@ended="endPlay"
					></audio>
			</div>
			<!-- 音频 E -->
			<div class="price-text">
				<em>限时免费</em> 价值668元防套路恋爱能力提升系列课程。
			</div>
			<div class="timeImg" v-if="assistancesData.startDate">{{transformTime(assistancesData.startDate)}} 至 {{transformTime(assistancesData.endDate)}}</div>
		</div>

		<!-- 未发起助力 课程获取方法 -->
		<div class="section decorateBg" v-if="assistancesData.assistanceFlag !== 0 && assistancesData.assistanceFlag !== 1">
			<div class="triangle positionR"></div>
			<div class="section-title">
				<div class="title-wrap"><img src="./assets/title2.png" class="titleImgTwo"></div>
			</div>
			<p class="text-info">{{assistancesData.totalNum}}名好友助力，免费得课程</p>
		</div>

		<!-- 已发起助力 助力情况 -->
		<div class="section-wrap" v-if="assistancesData.assistanceFlag === 0 || assistancesData.assistanceFlag === 1">
			<div class="section decorateBg">
				<div class="triangle positionR"></div>
				<div class="section-title">
					<div class="title-wrap"><img src="./assets/title3.png" class="titleImgThree"></div>
				</div>
				<!-- 助力未完成 -->
				<div v-if="assistancesData.assistanceFlag === 0">
					<p class="text-assist">{{assistancesData.totalNum}}名好友助力，免费得课程</p>
					<p class="text-countInfo"><em>{{assistancesData.assistanceCount > 0 ? assistancesData.assistanceCount : assistancesData.totalNum - assistancesData.surplusNum}}</em>人帮忙助力，还差<em>{{assistancesData.surplusNum}}</em> 人</p>
					<!-- <p class="text-countInfos" v-if="activityAssistanceUserVOList.length > 0">
						<span>已助力好友：</span>
						<em v-for="item of activityAssistanceUserVOList.slice(0, 2) ">{{item.userPhone}}</em>
						<div class="more" v-if="activityAssistanceUserVOList.length > 2">......</div>
					</p> -->
				</div>

				<!-- 助力完成 名单-->
				<p v-if="assistancesData.assistanceFlag === 1"  class="text-countInfos marginTop">
					<!-- <span>已助力好友：</span>
					<em v-for="item of activityAssistanceUserVOList.slice(0, 2)">{{item.userPhone}}</em>
					<div class="more" v-if="activityAssistanceUserVOList.length > 2">......</div> -->
				</p>
			</div>
			<!-- 助力完成 图片 -->
			<img  v-if="assistancesData.assistanceFlag === 1"  src="./assets/complete.png" class="complete-img">
		</div>
		<img src="./assets/bg-bottom.png" class="bg-bottom">
	</div>
</template>
<script>
	import code from './data/code.json';
	import ProgressBar from '../components/progress-bar';
	export default {
		components: {
			[ProgressBar.name]: ProgressBar
		},
		data() {
			return {
				isPlay: false,
				assistancesData: {},
				remainingTime: [],
				currentTime: 0,
				endTime: 0,
				audioEnd: false,
				activityAssistanceUserVOList: [],
			}
		},
		computed: {
			activitesStatusText() {
				return this.assistancesData.assistanceFlag === 0 ? '发起助力' : '发起助力可听完整版';
			}
		},
		methods: {
			togglePlay() {
				this.isPlay = !this.isPlay;
				if (this.isPlay) {
					this.$refs.audioRef.play();
				} else {
					this.$refs.audioRef.pause()
				}
			},

			// 目前的播放位置已更改时触发
			updateTime(e) {
				this.currentTime = e.target.currentTime;
				if (this.currentTime === this.endTime) {
					this.isPlay = false;
				}
			},

			// 音频播放完成
			endPlay() {
				this.isPlay = false;
			},

			// 当前播放时间修改
			changeCurrentTime(currTime) {
				currTime = currTime < 0 ? 0 : currTime > this.endTime ? this.endTime : currTime;
				this.$refs.audioRef.currentTime = currTime;
			},

			transformTime(time) {
				return time.slice(0, 10);
			},
			
			handleBack() {
				this.$refs.audioRef.pause();
				this.$yryz.goBack();
			},
			async handleJoinActivites() {
				if (this.assistancesData.invalidFlag) {
					return;
				}
				let httpHeader = await window.yryz.httpHeader();
				let joinInAppParams = {
					activityCode: code.activityCode,
					shareUserId: httpHeader.userId,
				}
				let res = await this.$http.post(`/lovelorn/v1.3/pt/activity-assistances/action/insertApp`, joinInAppParams);
				let shareParams = {
					title: '帮个忙吧！差一个人就成功了！',
					content: '668元防套路课程免费得，点击助力～',
					imgUrl: `https://cdn.yryz.com/lovelorn/image/ios/201905/EFB4CF9B-0A59-4050-9B8A-DD882786D38B.jpg`,
					url: `${window.location.origin}/official-activity/curriculum-assistance-web/${httpHeader.userId}`,
				}
				this.$yryz.share(shareParams);
			},
			
			async fetchData() {
				if (window.yryz.isNative()) {
					await window.yryz.httpHeader();
				}
				let res = await this.$http.get(`/lovelorn/v1.3/pt/activity-assistances/action/getSelfAssistance`, 
				{params: {activityCode: code.activityCode}})
				this.assistancesData = res.data.data;
				this.remainingTime = this.assistancesData.surplusDate.split('/');
				this.endTime = this.assistancesData.duration;
				this.activityAssistanceUserVOList = this.assistancesData.activityAssistanceUserVOList;
			}
		},
		mounted() {

			this.fetchData();
		}
	}
</script>
<style >
	@import './style.css';
</style>

